<template>
  <view class="item-container" :class="isSelect ? 'select-border' : ''">
    <view class="item-index-container">
      <span class="item-index">{{ itemIndex | filterItemIndex }}</span>
      <span class="move-style" @click="onClickUp">上移</span>
      <span class="move-style" @click="onClickDown">下移</span>
      <image class="item-img" :src="modifyImg" @click="onClickModify"></image>
      <image class="item-img" :src="deleteImg" @click="onClickDelete"></image>
    </view>

    <view
      class="item-title"
      :class="isSelect ? 'select-title' : 'not-select-title'"
      >{{ item.questionTitle }}</view
    >
  </view>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 1,
    },

    itemObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  watch: {
    index: {
      deep: true,
      immediate: true,
      handler: function (nVal) {
        if (nVal) {
          this.itemIndex = nVal + 1;
        }
      },
    },
    itemObj: {
      deep: true,
      immediate: true,
      handler: function (nVal) {
        if (nVal) {
          this.item = nVal;
        }
      },
    },
  },
  mounted() {},
  data() {
    return {
      isSelect: false,
      itemIndex: 1,
      item: {},

      modifyImg:
        this.$imgBaseSelf + "interview/icon-interview-question-modify.png",

      deleteImg:
        this.$imgBaseSelf + "interview/icon-interview-question-delete.png",
    };
  },

  filters: {
    filterItemIndex(num) {
      if (num == 10) {
        return "问题" + "十";
      } else if (num == 1) {
        return "问题" + "一";
      }
      const digits = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      const units = ["", "十", "百", "千", "万"];
      let result = "";
      let numStr = num.toString();
      for (let i = 0; i < numStr.length; i++) {
        let digit = parseInt(numStr.charAt(i));
        let unit = units[numStr.length - i - 1];
        if (digit === 0) {
          // 当前数字为0时不需要输出汉字，但需要考虑上一个数字是否为0，避免出现连续的零
          if (result.charAt(result.length - 1) !== "零") {
            result += "零";
          }
        } else {
          result += digits[digit] + unit;
        }
      }
      // 对于一些特殊的数字，如10、100等，需要在最前面加上“一”
      if (result.charAt(0) === "一") {
        result = result.substr(1, result.length);
      } else if (result.charAt(0) === "百") {
        result = "一" + result;
      } else if (result.charAt(0) === "千") {
        result = "一" + result;
      }
      return "问题" + result;
    },
  },
  methods: {
    onClickUp() {
      this.$emit("onClickUp", {
        index: this.itemIndex,
        item: this.item,
      });
    },

    onClickDown() {
      this.$emit("onClickDown", {
        index: this.itemIndex,
        item: this.item,
      });
    },

    onClickModify() {
      let url =
        "/pagesSub/companyCenter/interviewAI/modifyInterviewQuestion?id=" +
        this.item.id;

      uni.navigateTo({
        url: url,
      });
    },

    onClickDelete() {
      this.$emit("onClickDelete", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.move-style {
  color: #999999;
  padding-left: 15rpx;
  padding-right: 15rpx;
}

.item-img {
  height: auto;
  width: 32rpx;
  padding-left: 15rpx;
  padding-right: 15rpx;
}

.select-border {
  border: 2rpx solid #f75a3e;
}

.select-title {
  color: #f75a3e;
}

.not-select-title {
  color: #222222;
}

.item-container {
  padding-left: 36rpx;
  padding-right: 36rpx;
  //align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 24rpx;
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-top: 16rpx;
  display: flex;
  flex-direction: column;

  .item-index-container {
    display: flex;
    flex-direction: row;
    margin-top: 26rpx;
    .item-index {
      flex: 1;
      color: #999999;
      font-size: 22rpx;
    }
  }

  .item-title {
    margin-top: 10rpx;
    margin-bottom: 26rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 32rpx;
  }
}
</style>
